<template>
    <div>
        <el-container>
            <el-aside :class="{isCollapse: isCollapse}"><app-aside ref="aside"></app-aside></el-aside>
            <el-container>
                <el-header><app-header @collapse="collapse"></app-header></el-header>
                <el-main><app-main></app-main></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import AppHeader from '@/components/AppHeader'
import AppAside from '@/components/AppAside'
import AppMain from '@/components/AppMain'

export default {
    data() {
        return {
            isCollapse: false
        };
    },
    methods: {
        collapse() {
            // 压缩菜单
            this.isCollapse = !this.isCollapse
            // 调用子组件
            this.$refs.aside.collapse(this.isCollapse);
        }
    },
    components: {
        AppHeader,
        AppAside,
        AppMain
    }
}
</script>

<style lang="scss">
    .el-container {
        background-color: #E9EEF3;

        /* 头部组件 */
        .el-header {
            height: 110px !important ;
            padding: 0px 0px 1px 1px;
        }
        /* 左侧菜单组件 */
        .el-aside {
            width: 240px !important;
            height: calc(100vh - 0px);
            background-color: #3BBFB4;
        
        }
        /* 压缩菜单样式 */
        .isCollapse {
            width: 65px !important;
        }

        /* 主页面部分组件 */
        .el-main {
            color: #333;
            padding: 0;
            margin: 25px 25px 25px 25px;
        }
    }
</style>